import Link from "next/link";
import Social from "../_components/social";
import Form from "./_components/form";
import { getTranslations } from 'next-intl/server';

export default async function Page() {
  const t = await getTranslations("authPages");
  return (
    <div className="w-80 flex flex-col">
      <div className="flex justify-between z-10">
        <div className="h-16 text-3xl font-bold text-primary">{t("login")}</div>
      </div>
      <Form />

      <div className="h-16 flex items-center justify-center gap-2">
        <div className="text-muted-foreground">{t("hasAccount")}</div>
        <Link className="text-primary hover:underline hover:underline-offset-4" href="/auth/register">
          {t("createOne")}
        </Link>
      </div>
      <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
        <span className="bg-card text-muted-foreground relative z-10 px-2">
          Or continue with
        </span>
      </div>
      <div className="h-18 flex justify-center items-center gap-4">
        <Social />
      </div>
    </div>
  );
}
